<template>
  <el-drawer
    title="任务详情"
    :visible.sync="$attrs.visable"
    size="800px"
    :before-close="handleClose"
    append-to-body
  >
    <div class="drawbox p-24">
      <div class="mytips_error mytips_warning2 mb-20">
        <i class="el-icon-warning iconinfo mr-6"></i>
        具体发送进度详情请至各个企微号下对应任务中查看。
      </div>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        class="drawtabs"
      >
        <el-tab-pane label="发送对象" name="first">
          <!-- 条件筛选 -->
          <div class="conditionitem p-8">
            <div class="conheader c_text3 mb-12">客户符合以下条件</div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">含任意企微标签：</div>
              <div class="c_content flex flexwrap">
                <div v-for="item in 5" :key="item" class="c_tag f-12 mr-8 mb-8">一般</div>
              </div>
            </div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">含任意智能标签：</div>
              <div class="c_content flex flexwrap">
                <div v-for="item in 5" :key="item" class="c_tag f-12 mr-8 mb-8">孕4周</div>
              </div>
            </div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">加好友时间：</div>
              <div class="c_content flex flexwrap">
                <div class="c_tag f-12 mr-8 mb-8">2024-04-02 10:22:00 至 2024-04-18 10:23:00</div>
              </div>
            </div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">性别：</div>
              <div class="c_content flex flexwrap">
                <div class="c_tag f-12 mr-8 mb-8">女</div>
              </div>
            </div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">备注：</div>
              <div class="c_content flex flexwrap">
                有备注 - 含任意关键词 - 
                <div class="c_tag f-12 mr-8 mb-8">111</div>
              </div>
            </div>
          </div>

          <div class="conditionitem p-8">
            <div class="conheader c_text3 mb-12">客户排除以下条件</div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">含任意企微标签：</div>
              <div class="c_content flex flexwrap">
                <div v-for="item in 5" :key="item" class="c_tag f-12 mr-8 mb-8">一般</div>
              </div>
            </div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">含任意智能标签：</div>
              <div class="c_content flex flexwrap">
                <div v-for="item in 5" :key="item" class="c_tag f-12 mr-8 mb-8">孕4周</div>
              </div>
            </div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">加好友时间：</div>
              <div class="c_content flex flexwrap">
                <div class="c_tag f-12 mr-8 mb-8">2024-04-02 10:22:00 至 2024-04-18 10:23:00</div>
              </div>
            </div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">性别：</div>
              <div class="c_content flex flexwrap">
                <div class="c_tag f-12 mr-8 mb-8">女</div>
              </div>
            </div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">备注：</div>
              <div class="c_content flex flexwrap">
                有备注 - 含任意关键词 - 
                <div class="c_tag f-12 mr-8 mb-8">111</div>
              </div>
            </div>
          </div>

          <div class="conditionitem p-8">
            <div class="conheader c_text3 mb-12">客户群符合以下条件</div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">含任意关键词：</div>
              <div class="c_content flex flexwrap">
                <div v-for="item in 5" :key="item" class="c_tag f-12 mr-8 mb-8">一般</div>
              </div>
            </div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">含任意群标签：</div>
              <div class="c_content flex flexwrap">
                <div v-for="item in 5" :key="item" class="c_tag f-12 mr-8 mb-8">孕4周</div>
              </div>
            </div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">群成员数：</div>
              <div class="c_content flex flexwrap">
                <div class="c_tag f-12 mr-8 mb-8">1 至 2</div>
              </div>
            </div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">是否群主/管理：</div>
              <div class="c_content flex flexwrap">
                <div class="c_tag f-12 mr-8 mb-8">群主</div>
              </div>
            </div>
            <div class="c_item w_full flex mb-8">
              <div class="c_title c_text3">建群时间：</div>
              <div class="c_content flex flexwrap">
                <div class="c_tag f-12 mr-8 mb-8">2024-04-02 10:22:00 至 2024-04-18 10:23:00</div>
              </div>
            </div>
            
          </div>
          <!-- 所有客户 -->
          <!-- <div class="p-8 mb-8 c_text3">所有客户</div>
          <div class="p-8 mb-8 c_text3">所有客户群</div> -->
        </el-tab-pane>
        <el-tab-pane label="下发企微号" name="second">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="企微号" width="160">
              <template slot-scope="scope">
                <div class="flex kh_box">
                  <img
                    src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
                    alt=""
                    class="useravatar"
                  />
                  <div class="khnamebox pl-12">
                    <div class="title c_222333">{{ scope.row.title }}</div>
                    <div class="c_warning f-12">@志新</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="登录状态" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 1" class=""
                  ><span class="statusdot bg_52c41a"></span> 在线</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="time" label="创建时间"> </el-table-column>
            <el-table-column prop="number" label="任务发送对象">
              <template slot-scope="scope">
                <span>{{ scope.row.number || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="number" label="创建成功对象">
              <template slot-scope="scope">
                <span>{{ scope.row.number || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="创建失败对象">
              <template slot-scope="scope">
                <span>{{ scope.row.number || 0 }}</span>
              </template>
            </el-table-column>
            <template slot="empty">
              <TableEmpty />
            </template>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      queryParams: {
        keyword: "",
      },
      tableData: [{ id: 1, title: "闵雨薇", status: 1 }],
      exclude: 0,
      grouplist: [
        { id: 1, name: "测试群", checked: false },
        { id: 2, name: "测试群", checked: false },
      ],
      checkGroupList: [{ id: 1, name: "测试群", checked: false }],
      checkedAll: false, //全选
    };
  },
  props: {
    width: {
      type: String,
      default: "1100px",
    },
    showRight: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    handleClose() {
      this.$emit("close", 1); //关闭弹窗;
      this.$emit("update:visable", false);
    },

    handleClick() {},

    handleSubmit() {},
  },
};
</script>

<style lang="scss" scoped>
.drawbox {
  padding-top: 10px;
}
.drawtabs {
  ::v-deep .el-tabs__header {
    padding-left: 20px;
  }
  ::v-deep .el-tabs__item {
    background-color: #fafafa;
    border-bottom: 1px solid #dfe4ed;
    &.is-active {
      background-color: #fff;
    }
  }
}
.conheader {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px 0;
}
.c_item {
  .c_title {
    width: 120px;
  }
  .c_content {
    width: calc(100% - 120px);
  }
  .c_tag {
    width: fit-content;
    padding: 1px 8px;
    background: #f0f0f0;
    border-radius: 2px;
    border: 1px solid #e9e9e9;
    color: rgba(0,0,0,.65);
    line-height: 20px;
  }
}
</style>